<template>
    <div style="display:none">
        <button v-print="print">打印</button>
        <div id="printArea">
            <div class="printPage" v-for="(item,index) in mouldInfo" :key="index">
                <table>
                    <tr>
                        <th colspan="3" class="title">产品名称:{{item.name}}</th>
                    </tr>
                    <tr>
                        <td>产品编号</td>
                        <td>{{item.code}}</td>
                        <td rowspan="4" class="qrCode">
                            <img :src="$global.uploadUrl + item.qr" alt="">
                        </td>
                    </tr>
                    <tr>
                        <td>产品规格</td>
                        <td>{{item.specification}}</td>
                    </tr>
                    <tr>
                        <td>产品单位</td>
                        <td>{{item.unitName}}</td>
                    </tr>
                    <tr>
                        <td>库存数量</td>
                        <td>{{item.stock}}</td>
                    </tr>
                    <tr>
                        <td>打印时间</td>
                        <td colspan="2">{{new Date().dateFormat('yyyy-MM-dd hh:mm')}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import print from '@/utils/print.js'
    export default {
        data() {
            return {
                print
            }
        },
        props: {
            mouldInfo: {
                type: Array,
                default: () => []
            }
        },
    }
</script>

<style lang="less" scoped>
    #printArea {
        height: 100%;
        padding-left: 10px;

        table {
            border-collapse: collapse;
        }

        table,
        td,
        th {
            border: 1px solid #000;
            text-align: left;
            padding: 4px 8px;
            color: #000;
            font-size: 12px;
        }

        th.title {
            text-align: center;
            font-weight: 650;
            font-size: 16px
        }

        td.qrCode {
            text-align: center;
            img{
                width: 80px;
            }
        }
    }

    @media print {
        .printPage {
            height: 100%;
        }
    }
</style>